body {
    margin: 0;
    background-color: #cbcfea;
}

.cat-box {
    position: relative;
    top: 100px;
}


/* 整个头部 */
.cat-head {
    background-color: #0091c8;
    margin: 0 auto;
    width: 400px;
    height: 350px;
    position: relative;
    border-radius: 55% 55% 50% 50%;
    border: 2px #000 solid;
}

/* 脸 */
.cat-face {
    background-color: #f3f3f3;
    width: 328px;
    height: 260px;
    border-radius: 40% 40% 46% 46%;
    position: relative;
    top: 90px;
    left: 36px;
}

/* 眼睛 */
.cat-eyes {
    margin: 0 auto;
    width: 310px;
    height: 100px;
    position: relative;
    top: -58px;
    z-index: 4;
}

/* 左眼睛 */
.left-eye {
    background-color: #f3f3f3;
    width: 80px;
    height: 100px;
    border-radius: 50%;
    border: 2px #000 solid;
    position: absolute;
    left: 73px;
    z-index: 3;
}

/* 右眼睛 */
.right-eye {
    background-color: #f3f3f3;
    width: 80px;
    height: 100px;
    border-radius: 50%;
    border: 2px #000 solid;
    position: absolute;
    right: 73px;
    z-index: 3;
}

/* 左眼球 */
.left-eye .eye-ball {
    background-color: #000;
    width: 20px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    left: 53px;
    animation-name: leftEyeBall-move;
    animation-duration: 2s;
}

/* 右眼球 */
.right-eye .eye-ball {
    background-color: #000;
    width: 20px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 30px;
    right: 53px;
    animation-name: rightEyeBall-move;
    animation-duration: 2s;
}

.left-eye .eye-ball div {
    background-color: #f3f3f3;
    width: 10px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 5px;
}

.right-eye .eye-ball div {
    background-color: #f3f3f3;
    width: 10px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 5px;
}

/* 左腮 */
.cat-leftCheek {
    width: 50px;
    height: 35px;
    position: absolute;
    top: 20px;
    left: 33px;
    border-radius: 80% 50% 80% 50%;
    z-index: 2;
    animation-name: cheek-colorTurn;
    animation-duration: 2s;
}

/* 右腮 */
.cat-rightCheek {
    width: 50px;
    height: 35px;
    position: absolute;
    top: 20px;
    right: 36px;
    border-radius: 50% 80% 50% 80%;
    z-index: 2;
    animation-name: cheek-colorTurn;
    animation-duration: 2s;
}

/* 鼻子 */
.cat-nose {
    background-color: #e04e41;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    top: 26px;
    left: 164px;
    border: 2px #000 solid;
    margin-left: -19px;
    z-index: 4;
}

.cat-nose div {
    background-color: #f3f3f3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 4px;
    z-index: 2;
}

/* 鼻唇沟 */
.cat-nasolabialFold {
    background-color: #000;
    width: 2px;
    height: 78px;
    position: absolute;
    top: 65px;
    left: 164px;
    z-index: 4;
}

/* 胡须 */
.cat-beard {
    background-color: #f3f3f3;
    margin: 0 auto;
    position: relative;
    width: 310px;
    height: 100px;
    top: -58px;
    border-radius: 80%;
    z-index: 3;
}

.cat-beard .leftTop {
    width: 140px;
    height: 40px;
    border-top: 2px #000 solid;
    border-radius: 50% 10%;
    position: absolute;
    left: -56px;
    top: -10px;
    z-index: 4;
    transform: rotate(23deg);
}

.cat-beard .leftCenter {
    width: 140px;
    height: 40px;
    border-top: 2px #000 solid;
    border-radius: 50% 10%;
    position: absolute;
    left: -56px;
    top: 30px;
    z-index: 4;
    transform: rotate(9deg);
}

.cat-beard .leftBottom {
    width: 140px;
    height: 40px;
    border-top: 2px #000 solid;
    border-radius: 50% 10%;
    position: absolute;
    left: -56px;
    top: 77px;
    z-index: 4;
    transform: rotate(-13deg);
}

.cat-beard .rightTop {
    width: 140px;
    height: 40px;
    border-top: 2px #000 solid;
    border-radius: 10% 50%;
    position: absolute;
    right: -56px;
    top: -10px;
    z-index: 4;
    transform: rotate(-23deg);
}

.cat-beard .rightCenter {
    width: 140px;
    height: 40px;
    border-top: 2px #000 solid;
    border-radius: 10% 50%;
    position: absolute;
    right: -56px;
    top: 30px;
    z-index: 4;
    transform: rotate(-9deg);
}

.cat-beard .rightBottom {
    width: 140px;
    height: 40px;
    border-top: 2px #000 solid;
    border-radius: 10% 50%;
    position: absolute;
    right: -56px;
    top: 77px;
    z-index: 4;
    transform: rotate(13deg);
}

/* 嘴巴 */
.cat-mouth {
    background-color: #e44c3f;
    margin: -230px auto;
    width: 290px;
    height: 170px;
    border-radius: 50%;
    border: 2px #000 solid;
    position: relative;
    bottom: -100px;
}

/* 舌头 */
.cat-tone {
    background-color: #ff845a;
    width: 216px;
    height: 70px;
    border-radius: 96% 96% 100% 100%;
    border: 2px #000 solid;
    margin: -230px auto;
    position: relative;
    bottom: -256px;
    z-index: 5;
}

/* 左眼球运动动画 */
@keyframes leftEyeBall-move {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-18px, 0);
    }
}

/* 右眼球运动动画 */
@keyframes rightEyeBall-move {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(18px, 0);
    }
}

/* 腮背景颜色变化动画 */
@keyframes cheek-colorTurn {
    from {
        background-color: #f3f3f3;
    }

    to {
        background-color: #fec5c1;
    }
}